<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告条</title>
    <style>
        .top {
            height: 120px;
            background-color: #5aa4ae;
            color: #fff;
            font-size: 30px;
            /* 使用固定定位,让顶部广告条紧贴html视口的顶部 */
            position: fixed;
            top: 0;
            /* 视口 viewport 整个浏览器窗口的展示界面
            100vw视口宽度的100%  100vh视口高度的100% */
            width: 100vw;
        }
        .main {
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #fff799;
            left: 20px;
        }
        .right {
            background-color: #f35336;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto beatae consequatur cum doloremque
            ducimus ea earum facilis fuga, labore molestias, necessitatibus porro quaerat, quam quasi quisquam tenetur
            ullam vero voluptatum?
        </div>
        <div>Adipisci amet beatae consectetur consequatur cumque dicta ea expedita facere, facilis ipsum iste maxime
            modi natus, omnis optio perferendis quas quasi reiciendis rem repellat reprehenderit repudiandae saepe,
            soluta tenetur ut!
        </div>
        <div>Aspernatur corporis distinctio dolorum odio quod, rem vitae. Odio, quasi, similique. Ab asperiores
            doloribus, ducimus esse et ex ipsum itaque libero molestiae officia perspiciatis quibusdam quis reiciendis
            reprehenderit soluta voluptate.
        </div>
        <div>Error, odit, quod? Accusantium adipisci consequuntur, debitis distinctio dolorem doloribus eligendi harum
            id, in iusto odio officiis perferendis placeat quasi sequi tempora, voluptas voluptatem? Aspernatur
            consequuntur expedita minima nisi quaerat.
        </div>
        <div>Excepturi, iure laboriosam laudantium modi officia tempore vero. A atque cum cupiditate dignissimos dolore
            dolorum eos est facere libero nam nostrum perferendis quam quasi quidem, rem repudiandae suscipit ullam, ut.
        </div>
        <div>Deserunt porro soluta temporibus? Dolore ipsa nisi, officia officiis quia reiciendis sunt! Assumenda
            commodi deleniti ea exercitationem fuga fugiat hic iure libero, minima mollitia nisi quisquam quos saepe
            sapiente soluta!
        </div>
        <div>Ad alias aliquid at cupiditate doloribus, enim est et fugiat illo iusto labore minus nisi officia quae
            quaerat quis sed sequi suscipit! Autem dolores fugit inventore recusandae rem rerum sequi?
        </div>
        <div>Consequatur consequuntur distinctio ea enim explicabo facere ipsa labore minima nostrum quaerat, quasi,
            sequi similique veritatis. Amet aperiam atque culpa, doloremque enim eum hic id laboriosam natus nulla,
            officia ullam.
        </div>
        <div>Aspernatur autem eum facilis, impedit modi natus non officia officiis placeat quidem rem repudiandae sit
            unde vero voluptatem. Adipisci, autem dolores eos expedita ipsum itaque maxime natus soluta totam veritatis?
        </div>
        <div>Corporis dolore impedit provident quidem velit! Ab est iure optio quidem voluptatem. Ad aspernatur at culpa
            inventore molestias odio officiis pariatur reiciendis. Aliquam facere impedit incidunt qui veritatis vitae
            voluptatem?
        </div>
        <div>Commodi dicta eius illo in iure libero numquam perspiciatis quis sed voluptatibus. Ab asperiores eos
            impedit in laborum odio soluta tempore voluptatum. Doloremque ducimus eaque ipsa rerum, sapiente vel
            voluptatum!
        </div>
        <div>Aspernatur assumenda, consequuntur cupiditate et ex exercitationem fuga hic illo ipsam modi molestias nulla
            pariatur quasi quibusdam recusandae, tempore totam. Aliquid at consequuntur deserunt fuga necessitatibus?
            Est, odio, sunt! Numquam!
        </div>
        <div>A accusantium aliquam aut beatae corporis debitis delectus doloremque eum, eveniet, fugit harum ipsa ipsam
            maiores minima officia perspiciatis qui tempora temporibus unde ut! Accusamus animi eius obcaecati quasi
            qui?
        </div>
        <div>Aliquid consectetur dolores ducimus eos exercitationem harum, magni natus nemo nostrum omnis pariatur quod,
            tempora voluptates. Ad adipisci cupiditate in ipsum libero molestias, odit provident quae quas sint ut
            voluptates?
        </div>
        <div>Architecto, at delectus dolorem, earum enim esse est iste laborum magnam nemo nobis numquam possimus quidem
            repudiandae sit unde, vitae? Alias aliquid consectetur distinctio, est quaerat similique sit soluta unde?
        </div>
        <div>Accusantium alias ducimus eaque id, laborum maxime porro repudiandae vero vitae. Asperiores dolorum error
            esse numquam officia quam. Autem harum minus molestiae nulla omnis perferendis perspiciatis quos repellat.
            Ad, eum!
        </div>
        <div>Animi cumque exercitationem maiores modi nam nisi omnis quos, similique tempore. Fugiat illo itaque magnam.
            Asperiores dolores explicabo facilis iste minima minus necessitatibus nobis quae quod sequi! Expedita,
            officiis, quas.
        </div>
        <div>Doloremque, eos exercitationem facilis id in iure laborum officiis reiciendis rem. Aliquam aliquid autem
            consequuntur corporis dignissimos ex, excepturi impedit libero magnam neque nihil odio quae, qui
            reprehenderit velit vero?
        </div>
        <div>Ab doloremque est magnam officiis, soluta totam unde? Consequatur dolorem earum illo laboriosam mollitia
            perferendis quam, rerum voluptates! Ad enim facere labore, nisi optio quas rem saepe unde velit vero!
        </div>
        <div>Aliquam animi aperiam architecto earum eum id ipsa iusto laboriosam natus nihil nostrum optio provident
            quasi rem sed, ullam unde veniam voluptatum! A at illo nam nobis repellat rerum, saepe?
        </div>
        <div>Cumque dolorem dolores ducimus eos, et ex illo ipsum nulla perferendis possimus quibusdam repudiandae
            tempore totam. Ab commodi consectetur, consequatur cumque cupiditate eaque facere maiores non omnis
            reiciendis unde velit?
        </div>
        <div>A accusantium animi aperiam commodi consectetur consequuntur corporis cum delectus enim error impedit, in
            ipsum iusto molestiae molestias nulla odio quibusdam rem similique suscipit tempora tenetur totam unde vel
            velit.
        </div>
        <div>Ab accusamus accusantium alias aliquam animi architecto commodi consectetur culpa cupiditate debitis,
            delectus error est eum expedita facere fugit illum impedit inventore laborum maiores minima nam placeat
            repellat vel voluptatibus.
        </div>
        <div>Ab assumenda autem consequatur consequuntur corporis culpa, dolorum ea eius enim esse explicabo id impedit
            incidunt ipsa ipsum labore, laudantium libero minima nihil nostrum quibusdam ratione, sapiente sed
            temporibus ut?
        </div>
        <div>Est incidunt iste minus nemo nostrum reprehenderit repudiandae tenetur unde voluptas. Error esse et fuga
            sed tenetur. Aliquid aspernatur beatae cumque dolorem laboriosam, nemo neque officia recusandae, similique
            vero voluptatibus.
        </div>
        <div>Cumque enim id ipsam magni praesentium? Adipisci architecto, atque aut cumque error et excepturi
            exercitationem expedita impedit iusto laborum magni maiores nulla porro qui quia quibusdam, reiciendis saepe
            temporibus velit!
        </div>
        <div>At, dolore, repellat! Ad culpa doloremque eveniet facere iste nam nemo nihil perspiciatis qui reiciendis
            reprehenderit sunt, voluptates! A enim esse est et id illum incidunt rem sapiente velit voluptatibus.
        </div>
        <div>Animi architecto atque beatae et facere obcaecati officia perferendis quas quibusdam quos, reiciendis rem
            suscipit unde, vero vitae. Cum fugiat harum itaque iusto laudantium odit possimus quaerat tempora vero. Et.
        </div>
        <div>Ab amet animi aperiam aut delectus dignissimos enim, esse facilis fugit, inventore ipsa itaque magnam modi
            numquam pariatur, porro quae quas quidem quis recusandae reprehenderit repudiandae sunt tempore tenetur vel.
        </div>
        <div>Accusamus illum impedit non velit? Aliquid autem cum dignissimos dolores ea esse ex exercitationem iure
            iusto labore minus, perferendis perspiciatis quae quam sapiente sunt vel vitae, voluptatem. Ex, ipsum,
            tenetur.
        </div>
        <div>Alias asperiores, atque cupiditate eius eligendi illum mollitia nobis optio, quia quo, quod reprehenderit
            totam unde? Consequatur cum distinctio enim, harum itaque mollitia nihil possimus praesentium qui, rem
            suscipit voluptatibus.
        </div>
        <div>Ad, adipisci assumenda consectetur consequuntur cupiditate dolorem ea eius eligendi enim facere fugit iusto
            laborum libero maxime nulla officiis perspiciatis porro provident quibusdam recusandae rem sit tempora
            tempore totam velit.
        </div>
        <div>Accusantium animi beatae blanditiis culpa dolorem, eaque eius eveniet excepturi hic incidunt iusto laborum
            magni maiores minima nostrum optio porro quia reiciendis sed sit tempore temporibus ullam ut, vero vitae.
        </div>
        <div>Accusantium, adipisci architecto, asperiores at delectus eius eligendi esse et excepturi fuga illum impedit
            in inventore ipsum iusto nemo nihil nisi praesentium quasi quibusdam, rem sint soluta tempore velit vero!
        </div>
        <div>Beatae commodi ea et mollitia, obcaecati porro quod ratione similique sit tempore veritatis voluptatum? A
            accusamus commodi cum dolores, eaque eligendi inventore magni nam necessitatibus officiis perspiciatis
            repellendus suscipit voluptatum!
        </div>
        <div>Accusamus beatae, error eum explicabo molestias nihil officia quisquam rem sunt tempora voluptates
            voluptatum. Accusamus aliquid atque autem enim error fugit nam perferendis reprehenderit repudiandae
            sapiente! Consequuntur distinctio hic vitae.
        </div>
        <div>Ab aliquam aperiam delectus facilis, fugit ipsam quas! At beatae nam soluta velit voluptates? Autem
            consequatur corporis deleniti enim incidunt ipsa iusto, laborum quos rem sequi tenetur ut vel velit?
        </div>
        <div>Animi id nostrum, officiis perferendis possimus quaerat qui quidem sapiente totam ullam! Ab accusamus,
            consectetur delectus dicta dolore eius esse illum in iste maiores non perferendis placeat rerum similique,
            voluptatum!
        </div>
        <div>Animi cupiditate enim esse explicabo harum itaque sed, voluptate? Facere mollitia perferendis provident qui
            quisquam. Commodi cum dolorem eius harum itaque obcaecati perferendis placeat, rem similique suscipit vel
            veniam voluptatum!
        </div>
        <div>Adipisci amet aperiam assumenda autem blanditiis corporis cum deleniti dolorem doloribus harum illum libero
            magni maxime modi molestiae mollitia nemo nihil non obcaecati, perspiciatis placeat quas reiciendis
            repellendus, saepe vitae!
        </div>
    </div>
</body>
</html>